<template>
    <!--地图挂载dom-->
    <div id="map">
        <div class="MapTool">
            <el-row>
                <el-button type="primary" @click.stop.prevent="rotateLocation">旋转定位</el-button>
                <el-button type="success" @click.stop.prevent="elasticLocation">弹性定位</el-button>
                <el-button type="info" @click.stop.prevent="reboundLocation">反弹定位</el-button>
                <el-button type="warning" @click.stop.prevent="flyLocation">飞行定位</el-button>
                <el-button type="danger" @click.stop.prevent="aroundRotate">围绕旋转</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {OSM} from 'ol/source'
    import TileLayer from 'ol/layer/Tile'
    import {defaults as defaultControls} from 'ol/control.js';
    import {easeIn, easeOut} from 'ol/easing';
    import {fromLonLat} from 'ol/proj';

    var beijing;
    var guangzhou;
    export default {
        name: "AnimateControl",
        data() {
            return {
                map: null,
            }
        },
        mounted() {
            //注意参考系
            beijing = fromLonLat([116.3898468017578, 39.91026292816486], "EPSG:4326");
            guangzhou = fromLonLat([113.24981689453125, 23.126468438108688], "EPSG:4326");
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    })
                ], controls: defaultControls({
                    zoom: false//禁用右上角缩放组件
                }),//地图控件
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12,  //缩放到的级别
                })
            });
        },
        methods: {
            rotateLocation() {
                let view = this.map.getView();
                var center = view.getCenter();
                //视图动画渲染
                view.animate(
                    {
                        //动画结束时的视图中心,即当前视图中心同目标视图中心连线的中心点
                        center: [
                            center[0],
                            center[1]
                        ],
                        rotation: Math.PI,//动画结束时的旋转角度，即180度
                        easing: easeIn//按每一帧动画控制的动画速度，即开始缓慢并逐渐加快速度
                    },
                    {
                        center: beijing,//动画结束时的视图中心
                        rotation: 2 * Math.PI,//动画结束时的旋转角度，即360度回正
                        easing: easeOut//按每一帧动画控制的动画速度，即开始快速并逐渐减速
                    });
            },
            elasticLocation() {
                // 弹性伸缩值
                function elastic(t) {
                    //函数-10*sin(t-0.075)**t*t+1
                    return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
                }

                let view = this.map.getView();
                view.animate({
                    center: beijing,///动画结束时的视图中心
                    duration: 2000,//动画的持续时间（以毫秒为单位）
                    easing: elastic//按每一帧动画控制的动画持续时间函数
                });
            },
            reboundLocation() {
                // 反弹值
                function bounce(t) {
                    var s = 7.5625, p = 2.75, l;
                    if (t < (1 / p)) {
                        l = s * t * t;
                    } else {
                        if (t < (2 / p)) {
                            t -= (1.5 / p);
                            l = s * t * t + 0.75;
                        } else {
                            if (t < (2.5 / p)) {
                                t -= (2.25 / p);
                                l = s * t * t + 0.9375;
                            } else {
                                t -= (2.625 / p);
                                l = s * t * t + 0.984375;
                            }
                        }
                    }
                    return l;
                }

                let view = this.map.getView();
                view.animate({
                    center: guangzhou,///动画结束时的视图中心
                    duration: 2000,//动画的持续时间（以毫秒为单位）
                    easing: bounce//按每一帧动画控制的动画持续时间函数
                });
            },
            flyLocation() {
                let view = this.map.getView();
                var duration = 2000;//动画的持续时间（以毫秒为单位）
                var zoom = view.getZoom();

                //动画完成的回调函数
                function callback(complete) {
                    console.log("动画完成" + complete)
                }

                //第一个动画
                view.animate({
                    center: guangzhou,
                    duration: duration
                }, callback);
                //第二个动画
                view.animate({
                    zoom: zoom - 1,
                    duration: duration / 2
                }, {
                    zoom: zoom,
                    duration: duration / 2
                }, callback);
            },
            aroundRotate() {
                let view = this.map.getView();
                var rotation = view.getRotation();
                view.animate(
                    //第一个过程
                    {
                        rotation: rotation + Math.PI,//第一次动画旋转角度
                        anchor: guangzhou,//自旋的中心点
                        easing: easeIn////按每一帧动画控制的动画速度，即开始缓慢并逐渐加快速度
                    },
                    //第二个过程
                    {
                        rotation: rotation + 2 * Math.PI,//动画结束时的旋转角度，即360度回正
                        anchor: guangzhou,// 旋转中心点
                        easing: easeOut///按每一帧动画控制的动画速度，即开始快速并逐渐减速
                    });
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>